//<script type='text/javascript'>
 
/////////// SOLUTION FOR THE CONSOLE.LOG() BUG /////////////
if(!console) var console = {log : function( string ){ dashboard.comment( string ) }}


////////// CONTROLS //////////
WinControl = function() {
	Object.extend(control = new Element("div", {id:'control_win', "class":"win_ctrl", style:"display:none;"}), controls.win);
	control.insert( new Element("input", { type:"button", "class":"ico drag"}) );
	control.insert( new Element("input", { type:"button", "class":"ico mini"}).observe('click', control.minimize) );
	control.insert( new Element("input", { type:"button", "class":"ico close"}).observe('click', control.close) );
		
	return control;
}

TextControl = function() {
	
	Object.extend( control = new Element("div", {id:'control_text', "class":"text_ctrl", style:"display:none;"}), controls.text );
	
	init.langs.each( control.seedlang.bind( control ));
	control.insert( new Element( "span", { "class":"name" }));
	control.insert( control.field = new Element( "input", { type:"field" }));
	control.objtype = "text";
		
	return control;
}

HtmlControl = function() {
	Object.extend( control = new Element("div", {id:'control_html', "class":"html_ctrl", style:"display:none;"}), controls.html );
	
	init.langs.each( control.seedlang.bind( control ));
	control.insert( new Element( "span", { "class":"name" }));
	control.insert( control.field = new Element( "div", { "class":"field", contentEditable:"true" }));
	control.insert( panel = new HtmlPanel( control.field ));
	//control.objtype = "html";
	
	//var niceCtrl = new nicEditor();
	//niceCtrl.setPanel( control );
	//niceCtrl.addInstance( control.field );
	// not so sweet
	// $("txtfloat.div").observe("click",function(){ if(!this.innerHTML) {this.blur(); this.focus()}; });
		
	return control;
}

LightboxControl = function() {
	Object.extend( control = new Element("div", { id:'control_lightbox', "class":"lightbox_ctrl", style:"display:none;"}), controls.lightbox );

	init.langs.each( control.seedlang.bind( control ));
	control.insert( new Element( "span", { "class":"name" }));
	control.insert( control.close = new Element( "div", { "class":"close" }));
	document.body.insert( new Element( "div", { "class": "overlay", id: "overlay", style:"width: " + document.viewport.getWidth() + "px; height: " + document.viewport.getHeight() + "px;" }));
	control.insert( control.field = new Element( "div", { "class":"field", contentEditable:"true" }));
	control.insert( panel = new HtmlPanel( control.field ));

	return control;
}

FlowControl = function() {
	Object.extend(control = new Element("div", {id:'control_list', "class":"flow_ctrl", style:"display:none;"}), controls.flow);
	
	control.insert( count = new Element("div", { "class":"count"}) );
	count.insert( new Element("div", { id:"flow.back", "class":"arrow"}).observe('click', control.prev) );
	count.insert( new Element("span", { id:"flow.text"}).update("calculating") );
	count.insert( new Element("div", { id:"flow.next", "class":"arrow right"}).observe('click', control.next) );
	control.insert( new Element("div", { id:"flow.order", "class":"order"}).update( "onbepaald" ).observe('click', control.order) );
		
	return control;
}

FloatControl = function() {
	Object.extend(control = new Element("div", {id:'control_float', "class":"float_ctrl", style:"display:none;"}), controls.float );
	
	control.appendChild( new Element("img",{'id':"linefloat.kill",src: engine.path.img+"ico.close.png",'class':"ico"}).observe( "click", control.kill.bind( control )));
	control.appendChild( new Element("img",{'id':"linefloat.plus",src: engine.path.img+"ico.plus.png", 'class':"ico"}).observe( "click", control.plus.bind( control )));
	//control.appendChild( new Element("img",{'id':"linefloat.dupl",src: engine.path.img+"ico.dupl.png", '"class"':"ico"}).observe( "click", control.duplicate.bind( control )));
	control.appendChild( control.rank = new Rank({ type: "", value: 5, field:'rank', objid: 0 }));
	
	return control;
}

RollControl = function() {
	
	Object.extend(control = new Element("div", {id:'control_roll', "class":"roll_ctrl", style:"display:none;"}), controls.roll );
	control.update( new Element( "div", { "class":"arrup" })).insert( control.options = new Element( "ul", { "class":"options" })).insert( new Element( "div", { "class":"arrdn" }));
	
	//temp
	control.options.insert( new Element( "li" ).update( "option" )).insert( new Element( "li" ).update( "option" )).insert( new Element( "li" ).update( "option" )).insert( new Element( "li" ).update( "option" )).insert( new Element( "li" ).update( "option" ));
	
	return control;
}

SelectControl = function() {
	
	Object.extend(control = new Element("div", {id:'control_select', "class":"select_ctrl", style:"display:none;"}), controls.select );
	control.update( new Element( "div", { "class":"arrup" })).insert( control.options = new Element( "ul", { "class":"options" })).insert( new Element( "div", { "class":"arrdn" })).objtype = "select";
	
	return control;
}


///////// CONTROLS EXTENTIONS GROUPING OBJECT ////////////
controls = {
		//// add control to child
		bubble	: function(e) {
			if(!(control = $('control_' + this.objtype)) || control._current != this) {
				switch (this.objtype) {
				case "win" : 
					if(!control) document.body.insert( new WinControl() );
					break;
				case "list" :
					if(!control) document.body.insert( new FlowControl() );
					this.observe( "mouseout", controls.blur );
					break;
				case "float" :
					if(!control) document.body.insert( new FloatControl() );
					this.observe( "mouseout", controls.blur );
					break;
				case "text" :
					if(!control) { document.body.insert( control = new TextControl() );
						control.field.observe( "blur", control.blur.bind( control ));  }
					break;
				case "html" :
					if(!control) { document.body.insert( control = new HtmlControl() );
						control.field.observe( "blur", control.blur.bind( control ));  }
					break;
				case "lightbox" :
					if(!control) { document.body.insert( control = new LightboxControl()); 
						control.field.observe( "blur", control.blur.bind( control ));  }
					break;
				case "roll" :
					if(!control) document.body.insert( control = new RollControl() );	
					this.observe( "mouseout", controls.blur );
					break;
				case "select" :
					if(!control) { document.body.insert( control = new SelectControl() );	
						control.observe( "mouseout", controls.blur.bind( control )); }
					break;
				}
				
				$('control_' + this.objtype)._focus( this );
				
			}
		},
		
		/*_proto_		: {
		
			focus		: function() {
			
			},
			
			position	: function() {
			
			},
			
			blur		: function() {
			
			}
		}*/
		
		
		
		position	: function( obj ) {
			$( 'control_' + obj.objtype )._position( obj );
			if( obj.objtype == "list" ) $( "linefloat" ).hide(); 
		},
		blur	: function( e, rel ) {
			
			control = ( e.objtype )? $( 'control_' + e.objtype ) : $( 'control_' + this.objtype );
			
			el = (this.objtype == "list")? ((e.relatedTarget !=  $("control_float"))? 0 : 1):0;
			
			//if( rel == "absolute" || e.objtype || ( control.visible() && !( e.relatedTarget == control || e.relatedTarget.descendantOf( this ) || e.relatedTarget == this ) && !el) ) {
			if( rel == "absolute" || e.objtype || ( control.visible() && !( e.target == control || e.target.descendantOf( this ) || e.target == this ) && !el) ) {
				if(this.objtype == "list") $("control_float").hide();
				if( control._blur ) control._blur();
				control._current = 0;
				control.hide();
			}
		},
		//// the different control prototypes
		win		: {
			_current	: {},
			_focus		: function(obj) {
				this.show();
				this.clonePosition(obj, {setWidth:false, setHeight:false, offsetLeft:390, offsetTop:4});
				this._current = obj;
			},
			minimize		: function(e) {
				this.parentNode._current.firstChild.toggle();
			},
			close		: function(e) {
				this.parentNode._current.remove();
				this.parentNode.hide();
				delete win.all[this.parentNode._current.id];
			}
		},
		
		text		: {
			_current	: {},
			_focus		: function( obj ) {
				
				this.clonePosition(obj, {setWidth:true, setHeight:false, offsetLeft:-2, offsetTop:-18 })._current = obj;
				this.show().field.focus();
				
				this.down( ".name" ).update( obj.vars.descr );
				this.field.value = obj.vars.values[ init.lang ];
				
			},
			blur		: function( e ) {
				
				if( this.field.value != this._current.vars.values[ init.lang ] )
					this._current.update( this.field.value );
				
				if( this.visible() && !e.explicitOriginalTarget.parentNode.descendantOf( this )) //
				//if( this.visible() && !e.target.parentNode.descendantOf( this )) //
					this.hide()._current = 0;
			},
			
			seedlang	: function( lang ) {
				this.insert( el = new Element( "span", { "class":"lang" }).update( lang ).observe( "click", this.swaplang.bind( this, lang )));
				if( lang == init.lang ) el.addClassName( "select" );
			},
			swaplang	: function( lang, e ) {

        		$$( ".textfield" ).invoke( "reload", init.lang, lang );
        		$$( ".htmlfield" ).invoke( "reload", init.lang, lang );
        		$$( ".lightboxfield" ).invoke( "reload", init.lang, lang );
        		
        		$$( ".lang" ).invoke( "removeClassName", "select" );
        		e.currentTarget.addClassName( "select" );
        		
        		this.field.value = this._current.value;
        		init.lang = lang;
    		}
		},
		
		html		: {
			_current	: {},
			_focus		: function( obj ) {
			
				
				this.clonePosition(obj, {setWidth:true, setHeight:false, offsetLeft:-2, offsetTop:-18 })._current = obj;
				this.show().field.focus();
				
				this.down( ".name" ).update( obj.vars.descr );
				
				this.field.update( obj.vars.values[ init.lang ] );
				
			},
			blur		: function( e ) {
				
				if( this.field.innerHTML != this._current.vars.values[ init.lang ] )
					this._current.update_html( this.field.innerHTML );
				
				if( this.visible() && !e.explicitOriginalTarget.parentNode.descendantOf( this ) ) // 
				//if( this.visible() && !e.target.parentNode.descendantOf( this ) ) // 
					this.hide()._current = 0;
			},
			
			seedlang	: function( lang ) {
				this.insert( el = new Element( "span", { "class":"lang" }).update( lang ).observe( "click", this.swaplang.bind( this, lang )));
				if( lang == init.lang ) el.addClassName( "select" );
			},
			swaplang	: function( lang, e ) {

        		$$( ".textfield" ).invoke( "reload", init.lang, lang );
        		$$( ".htmlfield" ).invoke( "reload", init.lang, lang );
        		$$( ".lightboxfield" ).invoke( "reload", init.lang, lang );
        		
        		$$( ".lang" ).invoke( "removeClassName", "select" );
        		e.currentTarget.addClassName( "select" );
        		
        		this.field.update( this._current.innerHTML ).focus();
        		init.lang = lang;
    		}
		},
		
		lightbox		: {
			_current	: {},
			_focus		: function( obj ) {
			
				this.makePositioned( obj, { setWidth:false, setHeight:false, offsetLeft:false, offsetTop:false })._current = obj;
				this.show().field.focus();
				
				this.present = this._current;

				if( obj.vars.contenteditable && obj.vars.contenteditable == "false" )
					this.field.setAttribute( "contenteditable", "false" );

				if( $$( '.overlay' )) 
					$$( '.overlay' ).pop().show();
				
				this.down( ".name" ).update( obj.vars.descr );
				this.field.update( obj.vars.wrapper.wrap.replace( '%content%', obj.vars.values[ init.lang ] ).replace( 'title="editable"', 'id="lightbox_textid" contenteditable="true"' ));
				
				this.down( ".close" ).observe( "click", this.shutdown.bind( this, this.present ));
				
			},
			
			shutdown	: function( current, e ) {
			
				if( $$( '.overlay' )) 
					$$( '.overlay' ).pop().hide();

				if( this.field.innerHTML != current.vars.values[ init.lang ] ) {
					if( $( "lightbox_textid" ))
						this.present.update_html( $( "lightbox_textid" ).innerHTML ) ;
						
					else
						this.present.update_html( this.field.innerHTML );			
				}
				
				if( this.visible())
					this.hide()._current = 0;
			},
			
			seedlang	: function( lang ) {
				
				this.insert( el = new Element( "span", { "class":"lang" }).update( lang ).observe( "click", this.swaplang.bind( this, lang )));
				if( lang == init.lang ) el.addClassName( "select" );
			},
			swaplang	: function( lang, e ) {

       			$$( ".textfield" ).invoke( "reload", init.lang, lang );
        		$$( ".htmlfield" ).invoke( "reload", init.lang, lang );
        		$$( ".lightboxfield" ).invoke( "reload", init.lang, lang );
        		
        		$$( ".lang" ).invoke( "removeClassName", "select" );
        		e.currentTarget.addClassName( "select" );
        		
				this.field.update( this.present.vars.wrapper.wrap.replace( '%content%', this.present.vars.values[ lang ] ).replace( 'title="editable"', 'id="lightbox_textid" contenteditable="true"' ));
        		//this.field.update( this.present.vars.values[ lang ].replace( 'class="editable"', 'id="lightbox_textid" contenteditable="true"' )).focus();
        		init.lang = lang;
    		}
		},

		
		flow		: {
			_current	: {},
			_order_options	: { "ID_desc":["id teruglopend", "ID", "desc"], "ID_asc":["id oplopend", "ID", "asc"],  "short_asc":["alfabetisch", "key_1", "asc"],   "short_desc":["alfabetisch z-a", "key_1", "desc"], "pdate_desc":["datum", "flog", "desc"] },
			_order_current	: "ID_desc",
			_focus		: function(obj) {
				this._position(obj);
				this._current = obj;
				
				if( obj.vars.flow ) this._visualise(obj); else this._request(obj);
				
			},
			_position		: function(obj) {
			
				if( $( "control_float" )) $( "control_float" ).hide();
				this.clonePosition(obj, {setHeight:false, offsetLeft:0, offsetTop:obj.getHeight() });				
			},
			_visualise	: function(obj) {
				
				if(obj.vars.flow.total > obj.vars.flow.limit) {
					this.show();
					till = (obj.vars.flow.current + obj.vars.flow.limit);
					$('flow.text').update(obj.vars.flow.current + " till " + ((till > obj.vars.flow.total)? obj.vars.flow.total:till) );
					$('flow.text').insert( new Element("span").update(obj.vars.flow.total + " total") );
					opt = this._order_current = (obj.vars.flow.order)? $H(obj.vars.flow.order).keys()[0] +"_"+ $H(obj.vars.flow.order).values()[0] : this._order_current;
					$('flow.order').update(this._order_options[ opt ][0]);
				}

			},
			_request	: function(obj) {
				if(!obj) obj = this._current;
				xhttp.send('control.call.php', {trg:obj.id, transfer_type:"push", action:"flow", vars:obj.vars });
			},
			_push		: function(obj, values) {
				
				if(typeof obj == "string") obj = $(obj);
				
				if( obj.vars.flow != values ) obj.request( values );
				this._visualise( obj );
				new Effect.Highlight( 'flow.text', { startcolor:'#000000', endcolor:'#777777', duration:0.8 });
			},
			order		: function(e) {
				keys = $H(this.offsetParent._order_options).keys();
				cur = keys.indexOf(this.offsetParent._order_current);
				opt = this.offsetParent._order_current = keys[ (cur < keys.length-1)? cur+1 : 0 ];
				$('flow.order').update(this.offsetParent._order_options[ opt ][0]);
				this.offsetParent._current.vars.flow.order = {};
				this.offsetParent._current.vars.flow.order[this.offsetParent._order_options[ opt ][1]] = this.offsetParent._order_options[ opt ][2];
				this.offsetParent._current.vars.flow.current = 0;
				this.offsetParent._request();
			},
			prev		: function(e) {
				obj = this.offsetParent._current;
				xhttp.send('control.call.php', { trg:obj.id, transfer_type:"push", action:"flow", direction: "prev", vars:obj.vars });
			},
			next		: function(e) {
				obj = this.offsetParent._current;
				xhttp.send('control.call.php', { trg:obj.id, transfer_type:"push", action:"flow", direction: "next", vars:obj.vars });
			}
		},
		
		float		: {
			_current	: {},
			_focus		: function( obj ) {
				
				if( obj.hasClassName( "drop" ))
					 this.lastChild.hide();
				else this.lastChild.show();
				
				this.show();
				this.clonePosition(obj, {setWidth:false, setHeight:false, offsetLeft:obj.getWidth()-this.getWidth()-4, offsetTop:1});
				this.pulldata( obj )._current = obj;
			},
			pulldata	: function( obj ) {
				
				this.rank.pushrank( obj.vars.rank, obj );
				return this;
			},
			plus		: function() {
				
				li = this._current;
				li.vars.action = "edit";
				$( "column_right" ).insert( new Win().request({ type:li.vars.type, action:"edit", vars:li.vars }));
			},

			kill	: function() {
				
				li = this._current;
				delete ( floats.li.all[ li.id ])? floats.li.all[ li.id ] : floats.float.all[ li.id ];
				
				xhttp.send('control.call.php', { action:'kill', transfer_type:'push', type:li.vars.type, vars:li.vars});
				controls.blur( li );
				li.remove();
    		},
    		
    		duplicate	: function( e ) {
				
				dashboard.comment( "duplication, soon." );
    		}	
		},

		roll		: {
			_current	: {},
			_focus		: function( obj ) {
				
				this.clonePosition(obj, { setHeight:false, offsetLeft:-2 }).show();
				this._current = obj;
			}
		},
		
		select		: {
			_current	: {},
			_focus		: function( obj ) {
				
				this.options.update();
				if( obj.vars.opts )
					obj.vars.opts.each( function( val ){
						this.options.insert( li = new Element( "li", ( val.key == obj.vars.key )? { "class":"active" }: {} ).update( val.value ).observe( "click", this.change.bind( this )));
						li.vars = val;
					},  this );
				
				this.clonePosition(obj, { setHeight:false, offsetLeft:-2 }).show();
				this._current = obj;
			},
			_blur		: function() {

				this._current.blur();
			},
			change		: function( e ) {
				
				this._current.send( e.currentTarget.vars );
				controls.blur( this, "absolute" );
			}
		}
}


